/*颜色、圆角、边框的定义*/
@import "theme.less";

.canvas{
     height:500px;
    .uml_tools, .uml_easel{
     	border:3px solid @assistantColor1;
     	border-top:none;
     }
     
     .tools_bar{
     	padding:6px;
     	margin-top:5px;
     	background:@assistantColor1;
     	
     	> span{
     		cursor:default;
     		display:inline-block;
     		padding:4px;
     		height:20px;
     		line-height:20px;
     		background:#CECECE;
     		border-radius:4px;
     		
     		&:hover{
     			background:#A0C1FF;
     		}
     		
     		i{
     			width:20px;
     			height:20px;
     			float:left;
     			display:inline-block;
     			background-image:url(icon.png);
     			background-position:20px 0;
     			margin-right:2px;
     		}
     		
     		&.generateCode{
     			i{
     				background-position:20px 20px;
     			}
     		}
     	}
     }
     
     .uml_tools{
        z-index:100;
        background:#fff;
        position:absolute;
        
        div {
            margin: 5px;
            height: 17px;
            cursor: pointer;
            line-height:15px;
            padding-left:17px;
            vertical-align: middle;
            
            span {
                display:block;
                padding-left:7px;
                height:17px;
            }
        }
        
        &.folder div span{
            display:none!important;
        }
        
        .cursor{background:url("../images/icons/cursor.png") no-repeat 0 1px;}
        .entity{background:url("../images/icons/class.png") no-repeat 0 1px;}
        .interface{background:url("../images/icons/interface.gif") no-repeat 0 1px;}
        .enum{background:url("../images/icons/enum.png") no-repeat 0 1px;}
        .property{background:url("../images/icons/property.png") no-repeat 0 1px;}
        .enumItem{background:url("../images/icons/enumItem.png") no-repeat 0 1px;}
        .action{background:url("../images/icons/action.png") no-repeat 0 1px;}
        .extends{background:url("../images/icons/generalizatic.gif") no-repeat 0 1px;}
        .implements{background:url("../images/icons/realization.gif") no-repeat 0 1px;}
        .aggregate{background:url("../images/icons/aggregate.gif") no-repeat 0 1px;}
        .compose{background:url("../images/icons/compose.gif") no-repeat 0 1px;}
        .associate{background:url("../images/icons/associate.gif") no-repeat 0 1px;}
        .current-tool{outline:@dottingColor solid 3px;}
    }
    
    .uml_easel{
        height:100%;
        overflow:auto;
        
        .uml_canvas{
            float:left;
            width:10000px;
            height:10000px;
            position:relative;
            
            .svg_canvas{
                position:absolute;
                width:10000px;
                height:10000px;
            }
            
            .node {
                min-width:100px;
                position:absolute;
                border-radius:0px;
                border:1px solid #5890c1;
                font-size:14px;
                background:rgba(255,255,255,0.5);
            }
        }
    }
    
    svg{
        /*线条的样式*/
        .uml_lines {
            cursor:hand;
            .line{
                polyline {
                    stroke-linejoin:round;
                    stroke-linecap:round;
                    stroke-width:2px;
                    stroke:#5890c1;
                    fill:none;
                    cursor:pointer;
                    transition: 0.3s stroke-width;
                }
                
                &.aggregate polyline{
                    marker-start:url(#arrow2);
                }
                
                &.compose polyline{
                    marker-start:url(#arrow3);
                }
                
               .line_info{
                    position:absolute;
                    z-index:10;
                    font-size:0;
                    
                    .multiplicity{
                        width:20px;
                        white-space: nowrap;
                    }
                    
                    .property_type{
                        min-width:20px;
                        height:20px;
                    }
                    
                    span{
                        font-size:16px;
                        display:inline-block;
                        cursor:pointer;
                        padding:2px;
                    }
                    
                    span:hover{
                        background:#ffebbf;
                    }
                }
                
                &.templine .line_info{
                    display:none;
                }
            }
        }
    }
    
    #template{
        display:none;
    }
    
    #edit_contextmenus {
        /*属性、行为、枚举项、常量的右键菜单的显示控制*/
        .add_property div{background-image:url("../images/icons/property.png");}
        .add_action div{background-image:url("../images/icons/action.png");}
        .add_enumItem div{background-image:url("../images/icons/enumItem.png");}
        .entity .add_enumItem {display:none;}
        .interface .add_enumItem, .interface .add_property{display:none;}
        .enum .add_action,.enum .add_property{display:none;}
        
        .add_entity div{background-image:url("../images/icons/class.png");}
        .add_interface div{background-image:url("../images/icons/interface.gif");}
        .add_enum div{background-image:url("../images/icons/enum.png");}
    }
}

.node, #dialog_container {
    /*泛型的展示效果，如果是集合类型则显示泛型*/
    .collection_type .genericity{
        display:inline-block;
    }
    .genericity{
        min-width:20px;
        display:none;
    }
    
    .genericity:before{
        content:"<";
        padding-right:1px;
    }
    .genericity:after{
        content:">";
        padding-left:1px;
    }
    
    /*合法操作*/
    &.legal{
        background:#CCFFCC!important;
        border-color:#009933;
        cursor:crosshair!important;
        .header{
            cursor:crosshair!important;
        }
    }
    /*非法操作*/
    &.illegal{
        border-color:red!important;
        cursor:not-allowed!important;
        .header{
            cursor:not-allowed!important;
        }
    }
    
    .header{
        cursor:move;
        text-align:center;
        padding:0 6px;
        
        .node_type{
            &:before{content:"«";}
            &:after{content:"»";}
        }
    }
    
    .actions, .properties, .enumItems{
        border-top:1px #5890c1 solid;
        min-height:10px;
        transition: 0.3s;
        padding:0 3px;
        &.active{
            -moz-box-shadow: 0px 0px 12px #CCCCCC;
            -webkit-box-shadow: 0px 0px 12px #CCCCCC;
            box-shadow: 0px 0px 12px #CCCCCC;
            background:#F7E1B5;
        }
    }
    
    .action, .property{
        &.public:before{
            padding-left:2px;
            content:"+";
        }
        &.private:before{
            padding-left:2px;
            content:"-";
        }
        &.protected:before{
            padding-left:2px;
            content:"#";
        }
        &.package:before{
            padding-left:2px;
            content:"~";
        }
    }
    
    .property{
        &.active{
            background:#fefadd;
        }
        div{
            height:18px;
            line-height:18px;
            display:inline;
        }
        .propertyName:after{content:" : ";}
        .propertyName, .propertyType, .relation{
            min-width:30px;
        }
    }
    
    .action {
        div{
            display:inline;
        }
        
        .arguments{
            &:before{
	            padding-left:2px;
	            content:"(";
            }
            &:after{
                padding-left:2px;
                content:") : ";
            }
            
            .action_argument{
            	font-size:0;
            	&:after{
            		content:",";
            		font-size:14px;
            		padding-right:4px;
            	}
            	&:last-child:after{
            		content:"";
            		padding:0;
            	}
            	span{
	        		font-size:14px;
	        	}
            }
        }
    }
}